<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline"
                     v-if="searchInfo.currentRoleId===5||searchInfo.currentRoleId===1||searchInfo.currentRoleId===2">
                <el-form-item>
                    <el-input
                            placeholder="请输入机构名称"
                            v-model="searchInfo.accountName"
                            clearable
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="auditStatus" v-if="searchInfo.currentRoleId!==3">
                    <el-select
                            v-model="searchInfo.auditStatus"
                            placeholder="请选择审批状态"
                            clearable
                            size="mini"
                    >
                        <el-option
                                v-for="item in auditOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="mini"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column prop="username" label="账户名称" align="center">
            </el-table-column>
            <!--            <el-table-column prop="roleName" label="角色" align="center">-->
            <!--            </el-table-column>-->
            <el-table-column prop="areaName" label="区域" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="auditStatus" label="审核状态" align="center">
                <template slot-scope="scope">
                    <span :class="fliterColor(scope.row.auditStatus)">{{filterStatus(scope.row.auditStatus)}}  <span
                            style="cursor:pointer" v-if="scope.row.auditStatus===2"
                            @click="showFailReason(scope.row.userId)">查看原因</span></span>
                </template>
            </el-table-column>
            <!--机构-->
            <el-table-column fixed="right" label="操作" align="center" width="300px" v-if="searchInfo.currentRoleId===3">
                <template slot-scope="scope">
                    <el-button
                            @click="optOrg(scope.row,0)"
                            size="mini"
                            type="info"
                            icon="el-icon-view"
                            v-if="btns&&btns.includes('view')"
                    >查看
                    </el-button>
                    <el-button
                            @click="optOrg(scope.row,2)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('edit'))
                                    &&(scope.row.auditStatus===0 || scope.row.auditStatus===2)
                                    &&searchInfo.currentRoleId===scope.row.roleId"
                    >编辑
                    </el-button>
                    <el-button
                            @click="commitAudit(scope.row)"
                            size="mini"
                            type="warning"
                            icon="el-icon-document"
                            v-if="(btns&&btns.includes('commitAudit'))
                                    &&(scope.row.auditStatus===0||scope.row.auditStatus===2)">
                        提交审核
                    </el-button>
                </template>
            </el-table-column>
            <!--教育局/运营/超级管理员-->
            <el-table-column fixed="right" label="操作" align="center" width="270px"
                             v-if="searchInfo.currentRoleId===5||searchInfo.currentRoleId===1||searchInfo.currentRoleId===2">
                <template slot-scope="scope">
                    <el-button
                            @click="optOrg(scope.row,0)"
                            size="mini"
                            type="info"
                            icon="el-icon-view"
                            v-if="btns&&btns.includes('view')"
                    >查看
                    </el-button>
                    <el-button
                            @click="optOrg(scope.row,2)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                    >编辑
                    </el-button>
                    <el-button
                            @click="openAudit(scope.row)"
                            size="mini"
                            type="warning"
                            icon="el-icon-document"
                            v-if="btns&&btns.includes('audit')&&scope.row.auditStatus===1"
                    >审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog
                :before-close="closeDialog"
                :title="dialogTitle"
                :visible.sync="dialogFormVisible"
                class="dialogs"
        >
            <el-form
                    :model="form"
                    :inline="true"
                    :rules="rules"
                    label-width="100px"
                    ref="areaForm"
            >
                <el-divider content-position="left">基本信息</el-divider>
                <el-form-item label="机构名称" prop="username">
                    <el-input
                            autocomplete="off"
                            v-model="form.username"
                            size="small"
                            clearable
                            :disabled="!isUpload"
                    ></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex" :disabled="!isUpload">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-divider content-position="left">联系信息</el-divider>
                <el-form-item label="区域" prop="areaId">
                    <div style="width: 230px;" v-if="options">
                        <treeselect
                                placeholder="选择区域"
                                :options="options"
                                noResultsText="未查询到该地区"
                                noChildrenText="无下级区域"
                                :value="selectValue"
                                :valueFormat="selectValueFormat"
                                loadingText="疯狂加载中..."
                                openDirection="auto"
                                :load-options="loadOptions"
                                @select="getAreaInfo"
                                :disabled="!isUpload"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input
                            autocomplete="off"
                            v-model="form.address"
                            size="small"
                            placeholder="详细地址"
                            clearable
                            :disabled="!isUpload"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input
                            autocomplete="off"
                            v-model="form.mobile"
                            size="small"
                            placeholder="请输入手机号"
                            clearable
                            :disabled="!isUpload"
                    ></el-input>
                </el-form-item>
                <el-divider content-position="left">资质信息</el-divider>
                <el-form-item label="营业执照" prop="orgCertificationVO.businessLicenseUrl" class="pics">
                    <!--编辑情况-->
                    <el-upload
                            v-if="isUpload"
                            :action="`${path}/api-system/file/upload/organ`"
                            :before-upload="checkFile"
                            :on-remove="(file, fileList) => handleRemove(file, fileList, 1)"
                            list-type="picture-card"
                            :headers="{ Authorization: token }"
                            :on-error="uploadError"
                            :file-list="businessLicenseUrls"
                            :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 1)"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看无数据情况-->
                    <el-upload
                            :disabled="true"
                            :action="`${path}/api-system/file/upload/organ`"
                            list-type="picture-card"
                            :file-list="businessLicenseUrls"
                            v-else-if="businessLicenseUrls.length===0"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看有数据情况-->
                    <div v-else>
                        <img v-if="businessLicenseUrls" v-for="item in businessLicenseUrls" :src="item.url"
                             class="avatar"
                             style="width: 148px;height:148px;margin-right: 10px;"/>
                    </div>
                </el-form-item>
                <el-form-item label="法人身份证正反面" prop="orgCertificationVO.idCardUrl" class="pics">
                    <!--编辑情况-->
                    <el-upload
                            v-if="isUpload"
                            :action="`${path}/api-system/file/upload/organ`"
                            :before-upload="checkFile"
                            :on-remove="(file, fileList) => handleRemove(file, fileList, 2)"
                            list-type="picture-card"
                            :headers="{ Authorization: token }"
                            :on-error="uploadError"
                            :file-list="idCardUrls"
                            :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 2)"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看无数据情况-->
                    <el-upload
                            :disabled="true"
                            :action="`${path}/api-system/file/upload/organ`"
                            list-type="picture-card"
                            :file-list="idCardUrls"
                            v-else-if="idCardUrls.length === 0">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看有数据情况-->
                    <div v-else>
                        <img v-if="idCardUrls" v-for="item in idCardUrls" :src="item.url" class="avatar"
                             style="width: 148px;height:148px;margin-right: 10px;"/>
                    </div>
                </el-form-item>
                <el-form-item label="打印凭证" prop="orgCertificationVO.voucherUrl" class="pics">
                    <!--编辑情况-->
                    <el-upload
                            v-if="isUpload"
                            :action="`${path}/api-system/file/upload/organ`"
                            :before-upload="checkFile"
                            :on-remove="(file, fileList) => handleRemove(file, fileList, 3)"
                            list-type="picture-card"
                            :headers="{ Authorization: token }"
                            :on-error="uploadError"
                            :file-list="voucherUrls"
                            :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 3)"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看无数据情况-->
                    <el-upload
                            :disabled="true"
                            :action="`${path}/api-system/file/upload/organ`"
                            list-type="picture-card"
                            :file-list="voucherUrls"
                            v-else-if="voucherUrls.length === 0">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看有数据情况-->
                    <div v-else>
                        <img v-if="voucherUrls" v-for="item in voucherUrls" :src="item.url" class="avatar"
                             style="width: 148px;height:148px;margin-right: 10px;"/>
                    </div>
                </el-form-item>
                <el-form-item label="办学许可证" prop="orgCertificationVO.licenceUrl" class="pics">
                    <!--编辑情况-->
                    <el-upload
                            v-if="isUpload"
                            :action="`${path}/api-system/file/upload/organ`"
                            :before-upload="checkFile"
                            :on-remove="(file, fileList) => handleRemove(file, fileList, 4)"
                            list-type="picture-card"
                            :headers="{ Authorization: token }"
                            :on-error="uploadError"
                            :file-list="licenceUrls"
                            :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 4)"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看无数据情况-->
                    <el-upload
                            :disabled="true"
                            :action="`${path}/api-system/file/upload/organ`"
                            list-type="picture-card"
                            :file-list="licenceUrls"
                            v-else-if="licenceUrls.length === 0">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!--查看有数据情况-->
                    <div v-else>
                        <img v-if="licenceUrls" v-for="item in licenceUrls" :src="item.url" class="avatar"
                             style="width: 148px;height:148px;margin-right: 10px;"/>
                    </div>
                </el-form-item>
                <el-divider content-position="left"
                >备注
                </el-divider
                >
                <el-form-item label="  " prop="remarks">
                    <el-input type="textarea" :disabled="!isUpload" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog" size="small">取 消</el-button>
                <el-button @click="enterDialog" type="primary" size="small" v-if="type===2 && saveFlag"
                >确 定
                </el-button
                >
            </div>
        </el-dialog>
        <!--审批弹出框-->
        <el-dialog title="审批信息" :visible.sync="auditDialogFormVisible" class="dialogs">
            <el-form :model="auditForm" ref="auditForm">
                <el-form-item label="审批意见" prop="remarks" class="pics">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入审批意见"
                            v-model="auditForm.remarks">
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeAudiDialog" size="small">取 消</el-button>
                <el-button @click="enterAudiDialog(2)" type="danger" size="small">审核不通过</el-button>
                <el-button @click="enterAudiDialog(3)" type="primary" size="small ">审核通过</el-button>
            </div>
        </el-dialog>

        <!--审批失败弹出框-->
        <el-dialog title="审批失败原因" :visible.sync="auditMessageVisible" class="dialogs">
            <span>{{failMessage}}</span>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {areaList, loadChildData} from "@/api/api";
    import {editUser, getAuditMessage, handleAudit, organList, userDetail} from "@/api/account";
    import infoList from "@/components/mixins/infoList";

    import Treeselect, {LOAD_CHILDREN_OPTIONS} from '@riophae/vue-treeselect'

    export default {
        components: {Treeselect},
        name: "account",
        mixins: [infoList],
        data() {
            const checkPhone = (rule, value, callback) => {
                const reg = /^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的手机号码"));
                } else {
                    callback();
                }
            };
            return {
                saveFlag: true,
                failMessage: "",
                arrayTempFirst: [],
                arrayTemp: [],
                selectValueFormat: "",
                selectValue: null,
                options: [],
                normalizer(node) {
                    return {
                        id: node.key,
                        label: node.name,
                        children: node.subOptions,
                    }
                },
                licenceUrls: [],
                voucherUrls: [],
                idCardUrls: [],
                businessLicenseUrls: [],
                searchInfo: {accountName: '', roleId: 3, currentRoleId: 0, currentAreaId: 0, auditStatus: ''},
                btns: [],
                isUpload: false,
                path: process.env.VUE_APP_BASE_API,
                sexOptions: [
                    {
                        value: 0,
                        label: "女",
                    },
                    {
                        value: 1,
                        label: "男",
                    },
                ],
                statusOptions: [
                    {
                        value: 0,
                        label: "否",
                    },
                    {
                        value: 1,
                        label: "是",
                    },
                ],
                auditOptions: [
                    {
                        value: '',
                        label: "全部",
                    },
                    {
                        value: 1,
                        label: "审核中",
                    },
                    {
                        value: 3,
                        label: "审核成功",
                    },
                    {
                        value: 2,
                        label: "审核失败",
                    }
                ],
                roleOptions: [
                    {
                        value: 3,
                        label: "机构",
                    },
                    {
                        value: 4,
                        label: "学校",
                    },
                    {
                        value: 5,
                        label: "教育局",
                    },
                    {
                        value: 2,
                        label: "管理员",
                    },
                ],
                listApi: organList,
                dialogFormVisible: false,
                auditDialogFormVisible: false,
                auditMessageVisible: false,
                dialogTitle: "新增账号",
                form: {
                    orgCertificationVO: {
                        voucherUrl: '',
                        idCardUrl: '',
                        businessLicenseUrl: '',
                        licenceUrl: ''
                    }
                },
                auditForm: {
                    remarks: ''
                }
                ,
                voucherUrl: '',
                idCardUrl: '',
                businessLicenseUrl: '',
                licenceUrl: '',
                type: "",
                rules: {
                    username: [{required: true, message: "请输入账户名称", trigger: "blur"},],
                    roleId: [{required: true, message: "请选择角色", trigger: "change"}],
                    areaId: [{required: true, message: "请选择区域", trigger: "change"}],
                    sex: [{required: true, message: "请选择性别", trigger: "change"}],
                    mobile: [{required: true, message: "请输入手机号", trigger: "blur"}, {
                        validator: checkPhone,
                        trigger: "blur"
                    },],
                    // 'orgCertificationVO.idCardUrl': [
                    //     {required: true, message: "请上传身份证", trigger: "blur"},
                    // ],
                    // 'orgCertificationVO.businessLicenseUrl': [
                    //     {required: true, message: "请上传营业执照", trigger: "blur"},
                    // ]
                },
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            async getAreaInfo(node, instanceId) {
                this.form.areaId = node.id;
                this.form.areaName = node.label;
            },
            async handleItemChange(val) {
                const res = await loadChildData()
            },
            fliterColor(val) {
                switch (val) {
                    case 0:
                        return 'info'
                    case 1:
                        return 'warning'
                    case 2:
                        return 'danger'
                    case 3:
                        return 'success'
                    default:
                        break;
                }
            },
            filterStatus(val) {
                switch (val) {
                    case 0:
                        return '待审核'
                    case 1:
                        return '审核中'
                    case 2:
                        return '审核失败'
                    case 3:
                        return '审核成功'
                    default:
                        break;
                }
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            initForm() {
                this.$refs.areaForm.resetFields();
                this.form = {
                    path: "",
                    apiGroup: "",
                    method: "",
                    description: "",
                };
            },
            closeDialog() {
                this.initForm();
                this.dialogFormVisible = false;
            },
            async loadOptions({action, parentNode, callback}) {
                if (action === LOAD_CHILDREN_OPTIONS) {
                    //点击选项事件
                    const res = await areaList(1, parentNode.id, 1)
                    res.data.forEach((item, index, array) => {
                        if (item.childNumber > 0) {
                            this.arrayTemp.push({
                                id: item.areaId,
                                label: item.name,
                                children: null
                            });
                        } else {
                            this.arrayTemp.push({
                                id: item.areaId,
                                label: item.name,
                                children: undefined
                            });
                        }
                    })
                    parentNode.children = this.arrayTemp;
                    this.arrayTemp = [];
                    callback()
                }
            },
            openDialog(type) {
                switch (type) {
                    case 0:
                        this.dialogTitle = "查看";
                        break;
                    case 2:
                        this.dialogTitle = "编辑";
                        break;
                    default:
                        break;
                }
                this.type = type;
                this.dialogFormVisible = true;
            },
            async optOrg(row, type) {
                this.form.headImgUrl = '';
                this.businessLicenseUrls = [];
                this.idCardUrls = [];
                this.voucherUrls = [];
                this.licenceUrls = [];
                type === 2 ? this.isUpload = true : this.isUpload = false
                const res = await userDetail(row.userId, 1)
                this.type = type
                this.form = res.data

                this.selectValue = {id: res.data.areaId, label: res.data.areaName, children: null};
                this.selectValueFormat = res.data.areaName

                this.businessLicenseUrl = res.data.orgCertificationVO.businessLicenseUrl;
                if (this.businessLicenseUrl !== undefined && this.businessLicenseUrl !== '') {
                    let businessLicenseUrlArray = this.businessLicenseUrl.split(";").filter(item => item !== '');
                    businessLicenseUrlArray.forEach((item, index, array) => {
                        this.businessLicenseUrls.push({name: 'businessLicenseUrl', url: item})
                    })
                }

                this.idCardUrl = res.data.orgCertificationVO.idCardUrl;
                if (this.idCardUrl !== undefined && this.idCardUrl !== '') {
                    let idCardUrlArray = this.idCardUrl.split(";").filter(item => item !== '');
                    idCardUrlArray.forEach((item, index, array) => {
                        this.idCardUrls.push({name: 'idCardUrl', url: item})
                    })
                }

                this.voucherUrl = res.data.orgCertificationVO.voucherUrl;
                if (this.voucherUrl !== undefined && this.voucherUrl !== '') {
                    let voucherUrlArray = this.voucherUrl.split(";").filter(item => item !== '');
                    voucherUrlArray.forEach((item, index, array) => {
                        this.voucherUrls.push({name: 'voucherUrl', url: item})
                    })
                }

                this.licenceUrl = res.data.orgCertificationVO.licenceUrl;
                if (this.licenceUrl !== undefined && this.licenceUrl !== '') {
                    let licenceUrlArray = this.licenceUrl.split(";").filter(item => item !== '');
                    licenceUrlArray.forEach((item, index, array) => {
                        this.licenceUrls.push({name: 'licenceUrl', url: item})
                    })
                }

                this.openDialog(type);
            },
            //提交审核
            async commitAudit(row) {
                this.$confirm("此操作将提交审核, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await handleAudit({
                            userId: row.userId,
                            auditStatus: 1
                        });
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "提交成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                    })
                    .catch((e) => {
                        if (e === 'cancel') {
                            this.$message({
                                type: "info",
                                message: "已取消删除",
                            });
                        }

                    });

            },
            closeAudiDialog() {
                this.auditDialogFormVisible = false;
            },
            async showFailReason(val) {
                this.failMessage = "";
                this.auditMessageVisible = true;
                let res = await getAuditMessage(val);
                this.failMessage = res.data;
            },
            //审核弹出框
            async openAudit(row) {
                this.auditForm = row
                this.auditDialogFormVisible = true;
            },
            //教育局审核
            async enterAudiDialog(type) {
                this.auditForm = Object.assign(this.auditForm, {auditStatus: type})
                if (type === 2 && this.auditForm.remarks === undefined) {
                    this.$message({
                        type: "error",
                        message: "审批不通过需填写审批意见",
                        showClose: true,
                    });
                    return;
                }
                const {userId, remarks, auditStatus} = this.auditForm
                const res = await handleAudit({userId, remarks, auditStatus});
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "提交成功",
                        showClose: true,
                    });
                }
                this.getTableData();
                this.auditDialogFormVisible = false;
            },
            async deleteAreas(row) {
                this.$confirm("此操作将永久删除该地区, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await deleteArea(row.areaId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            async enterDialog() {
                // console.log(this.idCardUrl);
                this.form.orgCertificationVO.businessLicenseUrl = this.businessLicenseUrl;
                this.form.orgCertificationVO.voucherUrl = this.voucherUrl;
                this.form.orgCertificationVO.idCardUrl = this.idCardUrl;
                this.form.orgCertificationVO.licenceUrl = this.licenceUrl;
                this.$refs.areaForm.validate(async (valid) => {
                    if (valid) {
                        console.log(this.form)
                        const res = await editUser(this.form);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "编辑成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                        this.closeDialog();
                    }
                });
                // this.$refs.areaForm.resetFields();
            },
            //文件上传
            checkFile(file) {
                //禁用保存按钮
                // this.saveFlag = false
                this.fullscreenLoading = true;
                const isJPG = file.type === "image/jpeg";
                const isPng = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPng) {
                    this.$message.error("上传头像图片只能是 JPG或png 格式!");
                    this.fullscreenLoading = false;
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                    this.fullscreenLoading = false;
                }
                //判断身份证照片张数（最多两张）
                if (this.form.orgCertificationVO.idCardUrl !== undefined && this.form.orgCertificationVO.idCardUrl !== '') {
                    let idCardUrlArray = this.form.orgCertificationVO.idCardUrl.split(";").filter(item => item != '');
                    if (idCardUrlArray.length > 2) {
                        this.$message.error("身份证照片数量不能超过两张!");
                        return false;
                    }
                }
                return (isPng || isJPG) && isLt2M;
            },
            handleRemove(file, fileList, index) {
                if (index === 1) {
                    let businessLicenseUrlTemp = '';
                    fileList.forEach(function (value, index, array) {
                        let url = value.url;
                        businessLicenseUrlTemp = businessLicenseUrlTemp + url + ";";
                    });
                    console.log(fileList.length)
                    if (fileList.length === 0) {
                        this.businessLicenseUrl = '';
                    } else {
                        businessLicenseUrlTemp = businessLicenseUrlTemp.substring(0, businessLicenseUrlTemp.length - 1);
                        this.businessLicenseUrl = businessLicenseUrlTemp;
                    }
                } else if (index === 2) {
                    let idCardUrlTemp = '';
                    fileList.forEach(function (value, index, array) {
                        let url = value.url;
                        idCardUrlTemp = idCardUrlTemp + url + ";";
                    });
                    if (fileList.length === 0) {
                        this.idCardUrl = '';
                    } else {
                        idCardUrlTemp = idCardUrlTemp.substring(0, idCardUrlTemp.length - 1);
                        this.idCardUrl = idCardUrlTemp;
                    }
                } else if (index === 3) {
                    let voucherUrlTemp = '';
                    fileList.forEach(function (value, index, array) {
                        let url = value.url;
                        voucherUrlTemp = voucherUrlTemp + url + ";";
                    });
                    if (fileList.length === 0) {
                        this.voucherUrl = '';
                    } else {
                        voucherUrlTemp = voucherUrlTemp.substring(0, voucherUrlTemp.length - 1);
                        this.voucherUrl = voucherUrl;
                    }
                } else if (index === 4) {
                    let licenceUrlTemp = '';
                    fileList.forEach(function (value, index, array) {
                        let url = value.url;
                        licenceUrlTemp = licenceUrlTemp + url + ";";
                    });
                    if (fileList.length === 0) {
                        this.licenceUrl = '';
                    } else {
                        licenceUrlTemp = licenceUrlTemp.substring(0, licenceUrlTemp.length - 1);
                        this.licenceUrl = licenceUrlTemp;
                    }
                }


            },
            uploadSuccess(res, file, fileList, index) {
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    //恢复保存按钮
                    this.saveFlag = true
                    // let businessLicenseUrl = this.businessLicenseUrl;
                    // let idCardUrl = this.idCardUrl;
                    // let voucherUrl = this.voucherUrl;
                    // let licenceUrl = this.licenceUrl;
                    if (index === 2) {
                        if (this.idCardUrl === undefined || this.idCardUrl === '') {
                            this.idCardUrl = res.data
                        } else {
                            this.idCardUrl = this.idCardUrl + ";" + res.data
                        }
                    } else if (index === 1) {
                        if (this.businessLicenseUrl === undefined || this.businessLicenseUrl === '') {
                            this.businessLicenseUrl = res.data
                        } else {
                            this.businessLicenseUrl = this.businessLicenseUrl + ";" + res.data
                        }
                    } else if (index === 3) {
                        if (this.voucherUrl === undefined || this.voucherUrl === '') {
                            this.voucherUrl = res.data
                        } else {
                            this.voucherUrl = this.voucherUrl + ";" + res.data
                        }
                    } else if (index === 4) {
                        if (this.licenceUrl === undefined || this.licenceUrl === '') {
                            this.licenceUrl = res.data
                        } else {
                            this.licenceUrl = this.licenceUrl + ";" + res.data
                        }
                    } else if (index === 5) {
                        this.form.headImgUrl = res.data;
                    }
                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
                file.url = file.response.data
            },
            uploadError() {
                this.saveFlag = true
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
                this.fullscreenLoading = false;
            },
        },
        async created() {
            this.searchInfo.currentRoleId = this.userInfo.roleId;
            this.searchInfo.currentAreaId = this.userInfo.areaId;
            if (this.userInfo.roleId === 5 || this.userInfo.roleId === 2) {
                this.searchInfo.auditStatus = 1;
                this.auditOptions = [
                    {
                        value: '',
                        label: "全部",
                    },
                    {
                        value: 1,
                        label: "审核中",
                    },
                    {
                        value: 3,
                        label: "审核成功",
                    },
                    {
                        value: 2,
                        label: "审核失败",
                    }
                ];
            }
            this.options = [];
            this.getTableData();
            const res = await areaList(1, this.userInfo.areaId, 0)
            //this.cascaderData = res.data
            res.data.forEach((item, index, array) => {
                if (item.childNumber > 0) {
                    this.arrayTempFirst.push({
                        id: item.areaId,
                        label: item.name,
                        children: null
                    })
                } else {
                    this.arrayTempFirst.push({
                        id: item.areaId,
                        label: item.name,
                        children: undefined
                    })
                }
            })
            this.options = this.arrayTempFirst;
            this.btns = this.$route.meta.btnList
        },
    };
</script>
<style scoped lang="scss">
    .info {
        color: #409EFF;
    }

    .warning {
        color: #E6A23C;
    }

    .success {
        color: #67c23a;
    }

    .danger {
        color: #f56c6c;
    }

    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        ::v-deep .el-form .el-form-item {
            width: 49%;
            margin: 0;
        }

        ::v-deep .el-form .pics {
            width: 100%;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .el-divider .el-divider__text {
            font-weight: bold;
            color: #409EFF;
        }

        ::v-deep .el-form .el-form-item .el-form-item__content {
            width: calc(100% - 112px)
        }

        ::v-deep .el-form .el-form-item .el-form-item__content .el-textarea__inner {
            width: 100%;
        }
    }

    .warning {
        color: #dc143c;
    }

    @import '../../style/punch-treeselect.css';
</style>
